<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">

<link rel="import" href="neuro-statbar.html">

<dom-module id="player-display">
  <template>
    <style>
      :host {
        height: 64px;
        background-color: #333;
        display: flex;
        align-items: center;
      }

      .stat {
        margin: 0 auto;
        display: flex;
        align-items: center;
      }
      neuro-statbar {
        width: 320px;
      }
      .label {
        color: #fff;
        font-weight: bold;
        margin: 0 8px 0 20px;
      }
      .energy {
        --statbar-current-bg1: #FBC02D;
        --statbar-current-bg2: #fa0;
        --statbar-current-bg3: #f90;
      }
      .favor {
        --statbar-current-bg1: #fff59d;
        --statbar-current-bg2: #fff9c4;
        --statbar-current-bg3: #ffecb3;
      }
      .mana {
        --statbar-current-bg1: #0288d1;
        --statbar-current-bg2: #0097a7;
        --statbar-current-bg3: #009688;
      }
    </style>
    <template is="dom-if" if="[[data.attributes.health]]">
      <div class="stat">
        <div class="label">Health</div>
        <neuro-statbar class="hp" current-value="[[data.attributes.health.current]]" max-value="[[data.attributes.health.max]]"></neuro-statbar>
      </div>
    </template>

    <template is="dom-if" if="[[data.attributes.energy]]">
      <div class="stat">
        <div class="label">Energy</div>
        <neuro-statbar class="energy" current-value="[[data.attributes.energy.current]]" max-value="[[data.attributes.energy.max]]"></neuro-statbar>
      </div>
    </template>

    <template is="dom-if" if="[[data.attributes.favor]]">
      <div class="stat">
        <div class="label">Favor</div>
        <neuro-statbar class="favor" current-value="[[data.attributes.favor.current]]" max-value="[[data.attributes.favor.max]]"></neuro-statbar>
      </div>
    </template>

    <template is="dom-if" if="[[data.attributes.mana]]">
      <div class="stat">
        <div class="label">Mana</div>
        <neuro-statbar class="mana" current-value="[[data.attributes.mana.current]]" max-value="[[data.attributes.mana.max]]"></neuro-statbar>
      </div>
    </template>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class PlayerDisplay extends Polymer.Element {
      static get is() { return 'player-display'; }
      static get properties() {
        return {
          data: {
            type: Object
          },
        };
      }
    }

    window.customElements.define(PlayerDisplay.is, PlayerDisplay);
  </script>
</dom-module>

